<template>
  <!-- 左侧悬浮框 -->
  <div class="article-suspended-panel">
    <!-- 点赞 -->
    <div class="panel-btn active with-badge" @click="showLike">
      <svg
        t="1661061332258"
        class="sprite-icon"
        viewBox="0 0 1024 1024"
        version="1.1"
        xmlns="http://www.w3.org/2000/svg"
        p-id="841"
        width="20"
      >
        <path
          d="M773.6 912.7h-1.2c-37.2-0.4-74.5-0.4-111.8-0.4h-56.9c-38 0-76 0-114.1-0.5-21.1-0.6-41.9-5-61.5-13-33.3-13-52.3-42-52.2-79.7l0.1-141.4c0-78.3 0-156.7 0.7-235 0.1-21.3 13.8-41.3 25.5-51.8 45.3-41.4 94.5-93 115.1-162.6 5.7-19.4 7.9-40.8 10.2-63.4 4.6-45 33.8-74.3 72.8-74.3 15.3 0 30.6 4.6 45.6 13.5 30.1 18.1 50.2 46.5 61.3 87 17.8 64.3 8.7 126.7-1.3 180.2v0.2c-2.3 12.5 7.1 24.1 19.9 24.1h130c22.4 0 54.5 2.8 74.3 26.8 14.4 17.5 18.5 41.1 12.4 72.3-18.6 95.9-41.4 192.6-63.2 282.7-6.8 28.1-18.1 54.1-29 79.3l-4.7 10.8c-12.4 29.2-38 45.2-72 45.2zM216.1 903.3h-11.9c-43 0-78.2-35.2-78.2-78.2V476.6c0-43 35.2-78.2 78.2-78.2h11.9c43 0 78.2 35.2 78.2 78.2V825c0.1 43.1-35.1 78.3-78.2 78.3z"
          fill="#8a919f"
          p-id="842"
        ></path>
      </svg>
      <div class="likesNumber">{{ likes }}</div>
    </div>

    <!-- 评论 -->
    <div class="panel-btn with-badge comments" @click="toComments">
      <svg
        t="1661063189439"
        class="sprite-icon"
        viewBox="0 0 1024 1024"
        version="1.1"
        xmlns="http://www.w3.org/2000/svg"
        p-id="1218"
        width="20"
      >
        <path
          d="M823.466667 110.933333H200.533333C136.533333 110.933333 85.333333 162.133333 85.333333 226.133333v452.266667c0 64 51.2 119.466667 115.2 119.466667H298.666667l42.666666 102.4c8.533333 21.333333 38.4 25.6 51.2 4.266666l76.8-106.666666h349.866667c64 0 115.2-51.2 115.2-119.466667V226.133333c4.266667-64-46.933333-115.2-110.933333-115.2z m-554.666667 405.333334c-29.866667 0-51.2-25.6-51.2-55.466667 0-29.866667 25.6-55.466667 51.2-55.466667s51.2 25.6 51.2 55.466667c0 34.133333-21.333333 55.466667-51.2 55.466667z m243.2 0c-29.866667 0-51.2-25.6-51.2-55.466667 0-29.866667 25.6-55.466667 51.2-55.466667s51.2 25.6 51.2 55.466667c0 34.133333-21.333333 55.466667-51.2 55.466667z m243.2 0c-29.866667 0-51.2-25.6-51.2-55.466667 0-29.866667 25.6-55.466667 51.2-55.466667s51.2 25.6 51.2 55.466667c4.266667 34.133333-21.333333 55.466667-51.2 55.466667z"
          p-id="1219"
          fill="#8a919f"
        ></path>
      </svg>
      <div class="commentsNumber">{{ comments }}</div>
    </div>

    <!-- 收藏 -->
    <div class="panel-btn">
      <svg
        t="1661062752053"
        class="sprite-icon"
        viewBox="0 0 1024 1024"
        version="1.1"
        xmlns="http://www.w3.org/2000/svg"
        p-id="1315"
        width="20"
      >
        <path
          d="M519.2 807.2l255.2 133.6c12 6.4 25.6-4 23.2-16.8L748.8 640c-0.8-4.8 0.8-10.4 4.8-14.4L960 424.8c9.6-9.6 4-25.6-8.8-27.2l-284.8-41.6c-5.6-0.8-9.6-4-12-8.8l-128-257.6c-5.6-12-23.2-12-28.8 0L370.4 348c-2.4 4.8-7.2 8-12 8.8L73.6 398.4c-13.6 1.6-18.4 17.6-8.8 27.2l206.4 200.8c4 4 5.6 8.8 4.8 14.4l-48.8 284c-2.4 12.8 11.2 23.2 23.2 16.8L505.6 808c4-3.2 8.8-3.2 13.6-0.8z"
          p-id="1316"
          fill="#8a919f"
        ></path>
      </svg>
    </div>

    <!-- 分享 -->
    <div class="share-btn panel-btn">
      <svg
        t="1661062699474"
        class="sprite-icon"
        viewBox="0 0 1024 1024"
        version="1.1"
        xmlns="http://www.w3.org/2000/svg"
        p-id="1105"
        width="20"
      >
        <path
          d="M640 682.666667v213.333333l384-429.312L640 42.666667v213.333333C39.722667 329.002667-185.514667 900.565333 187.477333 980.522667 25.173333 855.253333 326.186667 663.04 640 682.666667z"
          p-id="1106"
          fill="#8a919f"
        ></path>
      </svg>
    </div>

    <!-- 分隔线 -->
    <div class="divider"></div>

    <!-- 警告 -->
    <div class="panel-btn">
      <svg
        t="1661062792779"
        class="sprite-icon"
        viewBox="0 0 1024 1024"
        version="1.1"
        xmlns="http://www.w3.org/2000/svg"
        p-id="1525"
        width="20"
      >
        <path
          d="M559.652811 766.630305c-12.925381 12.961196-28.559453 19.407002-46.729278 19.407002-18.171871 0-34.18252-6.445806-47.176462-19.407002-13.440104-13.026688-19.885909-28.592198-19.885909-47.175439 0-18.171871 6.445806-34.250058 19.885909-47.176462 12.993942-13.473873 29.004591-19.953448 47.176462-19.953448 18.169825 0 33.770128 6.478552 46.729278 19.953448 13.473873 12.926404 19.919678 29.004591 19.919678 47.176462C579.57249 738.038106 573.126684 753.603617 559.652811 766.630305zM464.924333 321.648674c12.514012-13.406335 28.594245-20.331048 47.999201-20.331048 19.473517 0 35.518958 6.479575 48.067762 20.331048 12.135388 13.405311 18.581194 30.308283 18.581194 50.6731 0 17.279548-25.987884 145.847739-35.005258 239.34211l-62.774719 0c-7.371898-93.529163-35.930327-222.097354-35.930327-239.34211C445.862185 352.401072 452.342784 335.499124 464.924333 321.648674zM940.146709 758.813269 590.407256 148.543128c-42.822294-74.432223-112.557542-74.432223-155.344021 0L85.322759 758.813269c-42.787502 74.398454-7.817036 135.426389 77.895091 135.426389l699.44616 0C947.930999 894.239658 983.002772 833.212746 940.146709 758.813269z"
          p-id="1526"
          fill="#8a919f"
        ></path>
      </svg>
    </div>

    <!-- 沉浸式阅读 -->
    <div class="panel-btn tooltip">
      <svg
        t="1661062825814"
        class="sprite-icon"
        viewBox="0 0 1024 1024"
        version="1.1"
        xmlns="http://www.w3.org/2000/svg"
        p-id="1735"
        width="20"
      >
        <path
          d="M849.07153297 646.81872559c9.30432153 0 17.26391602 3.30249 23.82934617 9.88769507 6.60992408 6.59509253 9.88769508 14.52502465 9.88769508 23.79473901v101.14617896c0 27.90801978-9.87780761 51.70275879-29.61364722 71.47814965-19.75067115 19.77539086-43.56518578 29.66308594-71.48803711 29.66308594h-101.1165166c-9.32409644 0-17.25402856-3.29754663-23.83428954-9.9865725-6.59509253-6.49127173-9.90252662-14.52502465-9.90252662-23.7947383 0-9.26971435 3.30743408-17.20458984 9.90252662-23.79473901 6.58026099-6.59014916 14.51019311-9.88769508 23.83428954-9.88769507h101.1165166c9.29937744 0 17.26391602-3.29754663 23.82440137-9.88769579 6.61486816-6.59014916 9.88769508-14.52008057 9.88769579-23.89361573v-101.04235815c0-9.36859107 3.28765845-17.30346656 9.89758254-23.78979493 6.57531762-6.69396997 14.52502465-9.99151587 23.83923363-9.99151587l-0.06427025 0.09887671zM242.38726782 141.3103025h101.10168506c9.30432153 0 17.2688601 3.29754663 23.819458 9.88769578 6.62475562 6.59509253 9.89758325 14.52502465 9.89758254 23.7947383 0 9.37353516-3.27282691 17.30346656-9.89758254 23.79473901-6.5505979 6.69396997-14.51513648 9.9865725-23.81451463 9.9865725h-101.10168433c-9.31915307 0-17.2688601 3.19372583-23.82934547 9.88769508-6.62475562 6.49127173-9.91241479 14.52502465-9.91241479 23.794739v101.04235816c0 9.36859107-3.28271508 17.30346656-9.89758324 23.89361573-6.57531762 6.59014916-14.51513648 9.88769508-23.81451392 9.88769507-9.31420898 0-17.25402856-3.29754663-23.82934547-9.88769507C144.49908423 360.80230689 141.21142578 352.86743141 141.21142578 343.49884033V242.45648217c0-27.91296386 9.86792016-51.70275879 29.62353539-71.47814965 19.75067115-19.77539086 43.57507324-29.66308594 71.48803711-29.66308594h0.06426954zM174.9877932 646.81872559c9.30432153 0 17.24414039 3.30249 23.81451393 9.88769507 6.62475562 6.59509253 9.90252662 14.52502465 9.90252662 23.79473901v101.14617896c0 9.26971435 3.27282691 17.19964576 9.89758324 23.78979492 6.57531762 6.59014916 14.51513648 9.88769508 23.81451393 9.88769579h101.12640404c9.29937744 0 17.25402856 3.29754663 23.82934547 9.88769507 6.60992408 6.59014916 9.88769508 14.52502465 9.88769579 23.89361572 0 9.26971435-3.27777099 17.20458984-9.88769579 23.79473901-6.57531762 6.59014916-14.52996803 9.88769508-23.82934547 9.88769508H242.41693092c-27.91296386 0-51.71264625-9.88769508-71.47814895-29.66308594-19.75561523-19.67651344-29.62353539-43.57012915-29.62353539-71.47814965v-101.04235816c0-9.26971435 3.27282691-17.30346656 9.88769507-23.89361573 6.58026099-6.59509253 14.52502465-9.88769508 23.81451464-9.88769507h-0.02966309zM680.57037329 141.3103025h101.1165166c27.92285133 0 51.73736596 9.88769508 71.48803711 29.56420922 19.73583961 19.77539086 29.61364722 43.57012915 29.61364722 71.47814965v101.14617896c0 9.26971435-3.27777099 17.30346656-9.88769508 23.78979493-6.56542945 6.69396997-14.52502465 9.88769508-23.82934617 9.88769506-9.29937744 0-17.26391602-3.19372583-23.82440139-9.88769506-6.61486816-6.48632836-9.88769508-14.52008057-9.88769579-23.78979493V242.35266137c0-9.26971435-3.28765845-17.19964576-9.90252661-23.78979492-6.57037354-6.59509253-14.52008057-9.88769508-23.83428955-9.88769579h-101.10168433c-9.31420898 0-17.2688601-3.29754663-23.82934618-9.88769507-6.60992408-6.59509253-9.89758325-14.52502465-9.89758254-23.79473902 0-9.37353516 3.28765845-17.30346656 9.89758254-23.89361571 6.56048608-6.59014916 14.51513648-9.88769508 23.82934618-9.88769508l0.04943799 0.09887672z"
          p-id="1736"
          fill="#8a919f"
        ></path>
      </svg>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      likes: "",
      ifLike: false,
      comments: "",
      ifComment: false,
      likeSvg: false,
    };
  },
  methods: {
    // 获取文章详情
    async getArticlesInfo() {
      const { data: res } = await this.$http.get("getDetails");
      this.title = res.data.title.replace("#", "");
      this.value = res.data.res.split(",");
      this.imagess = res.data.images;
      this.likes = res.data.likes;
      this.comments = res.data.comments;
      // console.log(this.value);
      this.titleLists();
      // console.log(this.titleList);
      this.titleFont();
      // console.log(this.titles);
      // console.log(this.titleTrue);
    },
    showLike() {
      if (!this.ifLike) {
        this.likes++;
        this.ifLike = true;
        // document.querySelector(".active svg").style = "background-color: blue";
      } else {
        this.likes--;
        this.ifLike = false;
      }
    },
    toComments() {
      document.documentElement.scrollTop = 4570;
    },
  },
  // 无需操作DOM, 在created阶段直接调取接口
  created() {
    this.getArticlesInfo();
  },
};
</script>

<style lang="scss" scoped>
.article-suspended-panel {
  position: fixed;
  top: 140px;
  z-index: 2;
  background-color: #f4f5f5;
  margin-left: 56px;
}
.divider {
  width: 32px;
  background: #e4e6eb;
  height: 1px;
  margin: 0 auto 1rem;
}
.panel-btn {
  position: relative;
  margin-bottom: 1.667rem;
  width: 48px;
  height: 48px;
  background-color: #fff;
  background-position: 50%;
  background-repeat: no-repeat;
  border-radius: 50%;
  box-shadow: 0 2px 4px 0 rgb(0 0 0 / 4%);
  cursor: pointer;
  text-align: center;
  font-size: 1.67rem;
  &:hover {
    svg path {
      fill: #252933;
      // color: #252933;
    }
  }
}
.active {
  &:hover {
    svg path {
      fill: #1e80ff;
      // color: #252933;
    }
    .likesNumber {
      background-color: #1e80ff;
    }
  }
}
// .active::after {}
.likesNumber {
  z-index: 10;
  background-color: #c2c8d1;
  border-radius: 50%;
  font-size: 3px;
  padding: 4px;
  position: absolute;
  right: -5px;
  top: 0;
  color: #fff;
}
.commentsNumber {
  z-index: 10;
  background-color: #c2c8d1;
  border-radius: 50%;
  font-size: 3px;
  padding: 4px;
  position: absolute;
  right: -5px;
  top: 0;
  color: #fff;
}
.tooltip {
  display: block;
  font-size: 0;
}
.sprite-icon {
  height: 100%;
}
</style>
